<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .box1{
            width: 600px;
            height: 900px;
            border: 10px red solid;

            /* 
                background-color 背景颜色
                    - 默认情况背景会一直延伸到边框的下边
                background-clip 设置显示背景的区域
                    - 可选值：
                        border-box 默认值，背景会延伸到边框的下边
                        padding-box 背景会延伸到内边距
                        content-box 背景只会在内容区中出现
                background-image 背景图片
                    如果图片和元素一样大，图片会完整显示将元素撑满
                    如果图片比元素大，图片默认只会显示一部分
                    如果图片比元素小，图片默认会双方向平铺以撑满元素
                background-repeat 设置背景图片的重复方式
                    可选值
                        repeat 默认值，图片会沿着x轴y轴双向重复
                        no-repeat 图片不会重复
                        repeat-x 图片水平方向平铺
                        repeat-y 图片垂直方向平铺

            
            */

            /* background-clip: content-box; */

            background-color: #bfa;
            background-image: url('./img/1.jpg');
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>